// import { createApp,createElementVNode } from 'vue'
/**
 * 
 * Vite CJS Node API deprecated
  在一个基础的 Vite 项目中，请确保：

vite.config.js 配置文件的内容使用 ESM 语法。
最近的 package.json 文件中有 "type": "module"，或者使用 .mjs/.mts 扩展名，例如 vite.config.mjs 或者 vite.config.mts。
对于其他项目，有几种常见的方法：

配置 ESM 为默认，如果需要则选择 CJS： 
在项目 package.json 中添加 "type": "module"。所有 *.js 文件现在都被解释为 ESM，并且需要使用 ESM 语法。你可以将一个文件重命名为 .cjs 扩展名来继续使用 CJS。

// const { createApp,createElementVNode } =  require('vue')
 */

/**
 * todo: 这里本人写的有bug，无法关闭弹窗
 */
/* const messageBox = {
  props: {
    msg: {
      type:String,
      required: true
    }
  },
  render(ctx) {
    return createElementVNode('div', null, 'dd')
  }
}

function showMsg(msg, clickHandle) {
  const div = document.createElement('div')
  document.body.appendChild(div)
  const app = createApp(messageBox, {
    msg,
    onClick() {
      clickHandle & clickHandle(() => {
        app.unmount(div)
        div.remove() // todo 无法销毁该弹窗
      })
    }
  })
  app.mount(div)
}

export default showMsg */


import { h, onBeforeUnmount } from 'vue'

// 定义函数式组件
const PopupComponent = {
  props: ['title', 'message'],
  setup(props, { emit }) {
    // 在组件销毁之前执行的逻辑
    onBeforeUnmount(() => {
      console.log('Popup component unmounted')
      // 在这里可以进行一些清理工作或取消订阅
    })

    // 处理关闭按钮点击事件
    function handleClose() {
      // 触发父组件传递过来的关闭事件
      emit('close')
    }

    // 使用h函数创建VNode
    return () => {
      return h('div', { class: 'popup' }, [
        h('div', { class: 'content' }, [
          h('h2', null, props.title),
          h('p', null, props.message),
          h('button', { onClick: handleClose }, 'Close')
        ])
      ])
    }
  }
}

export default PopupComponent
